/*
 * @Author: 肖思汗 
 * @Date: 2025-06-06 11:24:42 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-08-01 14:43:04
 */
import { View } from "@tarojs/components";
import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import { GoodsBaseData } from "types/type";
import designerStore from "../Designer/designerStore";
import styles from "./componentSelect.module.less";

import clsx from "clsx";
import { observer } from "mobx-react-lite";
import utilsStore from "src/utils/utilsStore";
import utils from "src/utils/utils";
import designerRender from "../Designer/designerRender";


interface Iprops {
    children?: ReactNode
}

// 部位选择组件
const ComponentSelect = observer((props: Iprops) => {

    const [switching, setSwitching] = useState<boolean>(designerStore.switching);

    const [goodsBaseDataComponents, setGoodsBaseDataComponents] = useState<GoodsBaseData["data"]["components"]>(toJS(designerStore.goodsBaseDataComponents));
    const [activeComponent, setActiveComponent] = useState<string>(designerStore.activeComponent);

    useEffect(() => autorun(() => {
        setGoodsBaseDataComponents(toJS(designerStore.goodsBaseDataComponents));
        setActiveComponent(designerStore.activeComponent);
        setSwitching(designerStore.switching);
    }, { delay: 30 }), []);

    const currentComponent = goodsBaseDataComponents.find(comp => comp.key === activeComponent);
    const currentIndex = goodsBaseDataComponents.findIndex(comp => comp.key === activeComponent);

    return (
        <View
            className={clsx(styles.componentSelect, switching && styles.disabled)}
            style={{
                top: utilsStore.titleTop + utils.rpx2px(180) + utilsStore.windowWidth + utils.rpx2px(20),
            }}
        >
            <View
                className={styles.arrowBtn}
                onClick={async () => {
                    if (designerStore.goodsBaseDataComponents.length > 1) {
                        designerRender.discardActiveObject();
                        designerStore.modifyDesignData(designerRender.toJSON());
                        designerStore.setSwitching(true);
                        // 等待画布处理完成后继续,这句代码不能删
                        await new Promise(resolve => setTimeout(resolve, 100));
                        designerStore.perComponet()
                    }
                }}>
                <View className={`${styles.arrow} ${styles.left}`} />
            </View>
            <View className={styles.content}>
                <View className={styles.title}>{currentComponent?.name || '部位'}</View>
                <View className={styles.subtitle}>({currentIndex + 1}/{goodsBaseDataComponents.length})</View>
            </View>
            <View
                className={styles.arrowBtn}
                onClick={async () => {
                    if (designerStore.goodsBaseDataComponents.length > 1) {
                        designerRender.discardActiveObject();
                        designerStore.modifyDesignData(designerRender.toJSON());
                        designerStore.setSwitching(true);
                        // 等待画布处理完成后继续,这句代码不能删
                        await new Promise(resolve => setTimeout(resolve, 100));
                        designerStore.nextComponet()
                    }
                }}>
                <View className={`${styles.arrow} ${styles.right}`} />
            </View>
        </View>
    );
});

export default ComponentSelect;
